<template>
  <div class="mobile-preview">

      <div v-for="(row,rowIndex) in rowList" :key="rowIndex">
        <!-- flexImg -->
        <row :key="rowIndex" trigger="hover" v-if="row.name==='flexImg'">
          <image-list 
            slot="body" 
            :imageList.sync="row.list" 
            :rowIndex.sync="rowIndex" 
            :class="{'empty-row':!row.list.length}"
            :categoryList.sync="categoryList"
            ></image-list>
          <image-action 
            slot="action" 
            :imageList.sync="row.list" 
            :rowIndex.sync="rowIndex" 
            @addImage="addImage" 
            @removeImage="removeImage"
            @deleteRow="deleteRow"
            ></image-action>
        </row>

        <!-- scrollGood -->
        <row :key="rowIndex" trigger="hover" v-if="row.name==='scrollGood'">
          <good-list
            slot="body"
            :class="{'empty-row':!row.list.length}"
            :imageList.sync="row.list" 
            ></good-list>
          <good-action 
            slot="action"
            :rowIndex.sync="rowIndex"
            :categoryList.sync="categoryList"
            :row="row"
            @goodChanged="goodChanged"
            @deleteRow="deleteRow"
            ></good-action>
        </row>

        <!-- swiper -->
        <row :key="rowIndex" trigger="click" v-if="row.name==='swiper'">
          <swiper-list 
            slot="body" 
            :imageList.sync="row.list" 
            :rowIndex.sync="rowIndex" 
            :class="{'empty-row':!row.list.length}"
            :categoryList.sync="categoryList"
            ></swiper-list>
          <image-action 
            slot="action" 
            :imageList.sync="row.list" 
            :rowIndex.sync="rowIndex" 
            @addImage="addImage" 
            @removeImage="removeImage"
            @deleteRow="deleteRow"
            ></image-action>
        </row>
      </div>
    
    <add-button 
      class="add-button" 
      @addRow="addRow" 
      :rowList.sync="rowList" 
      @rerangeRow="rerangeRow" 
      @submit="submit"
      ></add-button>
  </div>
</template>

<script>
import axios from 'axios';
import draggable from 'vuedraggable';
import AddButton from './base/AddButton';
import Row from './base/Row';
import ImageList from './base/ImageList';
import ImageAction from './base/ImageAction';
import GoodList from './base/GoodList';
import GoodAction from './base/GoodAction';
import SwiperList from './base/SwiperList';

export default {
  components: {
    draggable,
    AddButton,
    Row,
    ImageList,
    ImageAction,
    GoodList,
    GoodAction,
    SwiperList
  },
  data() {
    return {
      rowList: [],
      categoryList: []
    };
  },
  created() {
    this.getCategoryList();
    this.getLayouts();
  },
  methods: {
    addImage(rowIndex, image) {
      this.rowList[rowIndex].list.push(image);
    },
    removeImage(rowIndex, imageList) {
      this.rowList[rowIndex].list = imageList;
    },
    addRow(name) {
      const item = { list: [], name, isShow: true };
      this.rowList.push(item);
    },
    getCategoryList() {
      axios
        .get('https://nihaocai.zkong.me/api/categories')
        .then(res => res.data.data.map(item => this.genCategory(item)))
        .then(categoryList => {
          this.categoryList = categoryList;
        });
    },
    getLayouts() {
      axios
        .get('https://nihaocai.zkong.me/api/configs_by_group/layout')
        .then(res => JSON.parse(res.data.data.index_layout))
        .then(rowList => {
          this.rowList = rowList;
        });
    },
    genCategory({ id, name }) {
      return { value: id, label: name, children: [] };
    },
    goodChanged(index, category, goods) {
      console.log(index, category, goods);
      this.rowList[index].list = goods.map(item => Object.assign(item, { category }));
    },
    deleteRow(index) {
      this.rowList.splice(index, 1);
    },
    rerangeRow(rowList) {
      this.rowList = rowList;
    },
    submit() {
      const json = JSON.stringify(this.rowList);
      axios.post('https://nihaocai.zkong.me/api/setting/index_layout', { json }).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style scoped>
.mobile-preview
{
    width: 375px;
    min-height: 667px;
    margin: 0 auto;
}
.empty-row
{
    height: 100px;
}
.add-button
{
    position: fixed;
    top: 200px;
    right: 100px;
}

</style>
